<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ include file="/includes/common.jsp"%>

		<div id="chat-log-container" style="overflow: auto; width: 100%; height: 430px;">
			<div id="chat-log">
				<b>Lịch sử hỏi đáp</b>
			</div>
		</div>
<!-- <div id="multiple-choices">
<form>
<input type="radio" name="mc-answers" value="yes" /> Yes<br />
<input type="radio" name="mc-answers" value="no" /> No
</form> 
</div>

<div id="check-box">
<form>
<input type="checkbox" name="cb-answers" value="banana" /> Banana<br />
<input type="checkbox" name="cb-answers" value="apple" /> Apple
</form> 
</div> -->

		<div>
			<label>
				<div style="height: 20;"><span id="processing" style="display: none;"><img alt="[thinking]" src="${path}/images/icon_processing.gif" height="20px"> <i>Fesser đang trả lời...</i></span></div>
				<textarea onkeydown="enter(event);" name="chat-input" id="chat-input" style="width: 80%"	cols="45" rows="3"></textarea>
				<button onclick="onSendClick();" style="width: 15%; height:65px ;vertical-align: top;">Send</button>
			</label>
		</div>

	
<script type="text/javascript">
//$(document).ready(function () {
	  //your code here
//});

	$("#chat-input").focus();
	
	var fesserQuestion = '';
	var fesserQuestionType = 1;

	function onSendClick(){
		$("#processing").show();
		var userMessage = $("#chat-input").val();
		//alert(userMessage);
		if (!isNullOrEmpty(userMessage)){
			var userData = { 
					"msg-type": "user-sent", 
					"user-msg": $("#chat-input").val(),
					"question": fesserQuestion,
					"type" : fesserQuestionType
			};
			$.ajax({
				type: 'POST',
				url: '${path}/chat/chat',
				data: userData,
				dataType: 'json',
				success: function (json){
					//alert(json);
					$("#chat-log").append('<div class="user">' + json.user + '<\div>');
					$("#chat-log").append('<div class="fesser">' + json.fesser + '<\div>');	
					fesserQuestion = json.question;
					fesserQuestionType = json.type;
					updateRecommend();
					$("#chat-log-container").scrollTop($("#chat-log").height());	
					$("#chat-input").focus();
					$("#processing").hide();
				},
				error: function (jqXHR, textStatus, errorThrown) {
					alert(errorThrown);
					$("#processing").hide();
				}			
			});
			$("#chat-input").val("");
			$("#chat-input").focus();
		}
		
	};
	
	function updateRecommend() {
		$("#recommend-list-frame").attr('src', '${path}/meal/render?' + Math.random());
	}	

	function enter(evt)
	{
		if (evt.which == 13)
		{
			if (!evt.shiftKey){				
				evt.preventDefault();
				onSendClick();	
			}
		}				
	}

	function viewDish(id){
		$("#dish-list").show();
		$("#dish-list-button").css("font-weight","bold");
		$("#recommend-list").hide();
		$("#recommend-list-button").css("font-weight","normal");
		
		$("#dish-list-frame").attr('src','${path}/dish/view?id='+id+'\&edit=false');
	}

	
</script>